<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue';
import { formatNumber } from '@/home/utils/format';
import { useFetch } from '@/home/hooks/fetch';
import Pagination from '@/home/components/Pagination.vue';
import LoadingBox from '@/home/components/LoadingBox.vue';
import Loading from '@/home/components/Loading.vue';
import Tag from '@/home/components/Tag.vue';
import SearchSelect from '@/home/components/SearchSelect.vue';
import { cumputeAvatarColor } from '@/home/utils/avatarColor';
import { useI18n } from 'vue-i18n';
import Platform from '@/common/components/platform-avatar/index.vue';

const props = defineProps({
  query: {
    type: String,
    default: '',
  },

  type: {
    type: String,
    default: 'search',
  },
});

const PAGE_SIZE = 10;

const { $fetch } = useFetch();
const { t } = useI18n();

const page = ref(1);
const listing = ref<Record<string, any>[]>([]);
const loading = ref(true);
const total = ref(0);
const orderType = ref<'member' | 'newest'>('member');

const orderOptions = [
  { label: t('home.search.order.member'), value: 'member' },
  { label: t('home.search.order.newest'), value: 'newest' },
];

const refresh = async () => {
  loading.value = true;

  const { isSuccess, data } = await $fetch('/esInfoProduct/getPageProduct', {
    method: 'post',
    data: {
      productType: 'organization',
      [`${props.type === 'tag' ? 'searchLabel' : 'keyWords'}`]: props.query,
      pageNum: page.value,
      pageSize: PAGE_SIZE,
      strSort: orderType.value,
    },
  });

  loading.value = false;

  if (isSuccess) {
    listing.value = data?.records ?? [];
    total.value = data?.total ?? 0;
  }
}

const pageChange = (index: number) => {
  page.value = index;

  refresh();
}

watch(() => props.query, () => {
  page.value = 1;
  refresh();
});

onMounted(() => {
  refresh();
});
</script>

<template>
  <div class="page-search-organization container">
    <div class="mb-8 flex-y-center justify-between" v-if="props.type !== 'column'">
      <SearchSelect v-model="orderType" :options="orderOptions" @change="() => refresh()" />
      <div class="text-12 text-[#adadad] leading-20" v-if="props.type !== 'tag'">{{ $t('home.search.searchResult', { total }) }}</div>
    </div>

    <ul class="min-h-126 rounded-6 bg-white">
      <LoadingBox :loading="loading">
        <template v-if="listing?.length > 0">
          <li class="group" v-for="item in listing" :key="item.productId">
            <a :href="item.repoOrOrgurl" class="block" target="_blank">
              <div class="flex justify-between gap-x-16 px-24 py-16 hover:(bg-[rgba(61,124,250,0.03)]) group-first:(pt-24) group-last:(pb-24)">
                <div class="size-74 flex-shrink-0 self-start">
                  <img :data-src="item.orgLogo" :alt="item.orgName" class="lozad size-full rounded-4 bg-[#f7f7f7] object-contain" v-if="item.orgLogo">
                  <div class="size-full flex items-center justify-center rounded-4 text-22 color-white" :style="{ backgroundColor: cumputeAvatarColor(item.orgName) }" v-else>
                    {{ item.orgName.slice(0, 1).toUpperCase() }}
                  </div>
                </div>

                <div class="flex-grow">
                  <div class="flex-y-center gap-x-4">
                    <!-- eslint-disable-next-line vue/no-v-html -->
                    <h3 class="line-clamp-1 break-anywhere text-16 color-[#292929] font-medium leading-24" v-html="item.orgName"></h3>
                    <Platform class="shrink-0" :platform="item.platform" icon-class="size-16" tooltip />
                  </div>

                  <!-- eslint-disable-next-line vue/no-v-html -->
                  <p class="line-clamp-1 mt-4 break-anywhere text-14 color-[#575757] leading-22" v-html="item.desc || '&nbsp;'"></p>

                  <div class="mt-8 flex-y-center justify-between gap-x-72">
                    <div class="flex-y-center flex-shrink-0 self-end gap-x-24 text-[#575757]">
                      <div class="flex-y-center gap-4 text-12">
                        <div class="i-icons:repository size-16"></div>
                        <span class="leading-16">{{ formatNumber(item.starCount) }}</span>
                      </div>
                      <div class="flex-y-center gap-4 text-12">
                        <div class="i-icons:member size-16"></div>
                        <span class="leading-16">{{ formatNumber(item.forkCount) }}</span>
                      </div>
                    </div>

                    <div class="flex-y-center flex-wrap justify-end gap-4 text-12 text-#adadad leading-16" v-if="item.labelList?.length">
                      <template v-for="(labelValue, labelIndex) in item.labelList" :key="labelValue.labelId">
                        <div v-if="labelIndex > 0">·</div>
                        <Tag
                          :id="labelValue.labelId"
                          :name="labelValue.labelName"
                          :hashtag="false"
                          class="hover:(text-#292929)"
                          :class="{ 'text-[#3D7CFA]': (props.type === 'tag' && labelValue.labelId == props.query) }"
                          blank
                        />
                      </template>
                    </div>
                  </div>
                </div>
              </div>

              <hr class="mx-24 h-1 border-[#fafafa] border-solid group-last:(hidden)">
            </a>
          </li>
        </template>
        <template v-else-if="!loading && listing?.length === 0">
          <li class="min-h-550 flex items-center justify-center color-[#8b8b8b]">{{ $t('home.common.emptyContent') }}</li>
        </template>

        <template #loading>
          <li class="min-h-100 flex items-center justify-center">
            <Loading class="size-16 color-#8b8b8b" />
          </li>
        </template>
      </LoadingBox>
    </ul>

    <Pagination class="data-[total-pages=gt1]:(mt-32)" :count="total" :page="page" :page-size="PAGE_SIZE" @change="pageChange" />
  </div>
</template>

<style lang="scss" scoped>
</style>
